<template>
  <el-menu
    class="aside-menu"
    text-color="#fff"
    active-text-color="#F56C6C"
    background-color="#545c64"
    :default-active="active"
    :router="true"
  >
    <template v-for="item in menus">
      <el-submenu
        v-if="item.children && item.children.length > 0"
        :index="item.path"
        :key="item.path"
      >
        <template slot="title">
          <i :class="item.icon" v-if="item.icon"></i>
          <span>{{ item.title }}</span>
        </template>

        <el-menu-item
          v-for="child in item.children"
          :key="child.path"
          :index="child.path"
        >
          <i :class="child.icon" v-if="child.icon"></i>
          <span slot="title">{{ child.title }}</span>
        </el-menu-item>
      </el-submenu>

      <el-menu-item v-else :index="item.path" :key="item.path">
        <i :class="item.icon" v-if="item.icon"></i>
        <span slot="title">{{ item.title }}</span>
      </el-menu-item>
    </template>

    <!-- <el-submenu index="/system">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>系统模块</span>
            </template>

            <el-menu-item index="/system/user">用户模块</el-menu-item>
            <el-menu-item index="/system/role">角色模块</el-menu-item>
          </el-submenu>

          <el-menu-item index="/">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>

          <el-menu-item index="/about">
            <i class="el-icon-document"></i>
            <span slot="title">关于页面</span>
          </el-menu-item>

          <el-menu-item index="/setting">
            <i class="el-icon-setting"></i>
            <span slot="title">设置页面</span>
          </el-menu-item> -->
  </el-menu>
</template>

<script>
export default {
  name: "SideMenu",
  data() {
    return {
      active: "/",
      menus: [
        {
          path: "/system",
          title: "系统模块",
          icon: "el-icon-location",
          children: [
            { path: "/system/user", title: "系统用户", icon: "el-icon-menu" },
            { path: "/system/role", title: "系统角色" },
          ],
        },
        { path: "/", title: "首页", icon: "el-icon-menu", children: [] },
        { path: "/about", title: "关于页面", icon: "el-icon-document" },
        { path: "/setting", title: "设置页面", icon: "el-icon-setting" },
        {
          path: "/basic",
          title: "基础",
          icon: "el-icon-basic",
          children: [
            { path: "/basic/icon", title: "图标", icon: "el-icon-menu" },
            { path: "/basic/botton", title: "按钮" },
          ],
        },
        { path: "/radio", title: "选框", icon: "el-icon-radio" },
        { path: "/input", title: "输入", icon: "el-icon-input" },
        { path: "/select", title: "选择器", icon: "el-icon-select" },
        { path: "/datepicker", title: "日期", icon: "el-icon-datepicker" },
        { path: "/form", title: "表单", icon: "el-icon-form" },
        { path: "/table", title: "表格", icon: "el-icon-table" },
        { path: "/pagination", title: "分页", icon: "el-icon-pagination" },
        { path: "/message", title: "消息提示", icon: "el-icon-message" },
        { path: "/messagebox", title: "弹框", icon: "el-icon-messagebox" },
        { path: "/tabs", title: "标签页", icon: "el-icon-tabs" },
        { path: "/dialog", title: "对话框", icon: "el-icon-dialog" },
        { path: "/card", title: "卡片", icon: "el-icon-card" },
        { path: "/carousel", title: "走马灯 " },
        { path: "/image", title: "图片 " },
        { path: "/drawer", title: "抽屉 " },
      ],
    };
  },
  watch: {
    $route: function (newVal) {
      // console.log("当前的页面", newVal)
      const { path } = newVal;
      this.active = path;
    },
  },
};
</script>

